<template>
  <drag-modal
    title="预览图片"
    :width="600"
    :visible="visible"
    :destroyOnClose="true"
    :maskClosable="false"
    @cancel="cancel"
  >
    <a-spin :spinning="loading" style="text-align: center;">
      <img :src="url" width="500">
    </a-spin>
    <template slot="footer">
      <a-button @click="cancel">关闭</a-button>
    </template>
  </drag-modal>
</template>

<script>
export default {
  name: 'ImageModal',
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      url: undefined
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
